<!--------------------------------
 - 公用富文本编辑器
 - @Author: zuuuYao
 - @LastEditor: zuuuYao
 - @LastEditTime: 2025/08/29 22:51:42
 --------------------------------->
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      v-if="showToolbarFlag"
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      v-model="valueHtml"
      :default-config="editorConfig"
      :mode="mode"
      :style="{ height: editorHeight, overflowY: 'hidden' }"
      :read-only="readOnlyFlag"
      @on-created="handleCreated"
      @on-change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

defineOptions({ name: 'RichTextEditor' })

// Props：使用属性，子组件接收父组件传递的内容
const props = defineProps({
  // 内容
  content: { type: String, default: '' },
  // 工具栏是否显示，默认显示
  showToolbarFlag: { type: Boolean, default: true },
  // 编辑器高度，默认500px
  editorHeight: { type: String, default: '500px' },
  // 编辑器是否只读，默认可编辑
  readOnlyFlag: { type: Boolean, default: false },
})

// Emits：使用事件，将子组件内容传递给父组件。父组件使用 update(content: string)
const emit = defineEmits<{ (e: 'update', content: string): void }>()

const mode = ref('default')

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')

const toolbarConfig = {}

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {} as any,
}

// 上传图片配置
editorConfig.MENU_CONF.uploadImage = {
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'。传给后端接口的参数名，重要!
  fieldName: 'file',
  server: 'http://localhost:8080/files/wangEditorUpload',
}

function handleCreated(editor: any) {
  editorRef.value = editor // 记录 editor 实例，重要！

  // 根据父组件传递的readOnlyFlag，设置编辑器为只读
  if (props.readOnlyFlag) {
    editorRef.value.disable()
  }
  else {
    editorRef.value.enable()
  }
}

function handleChange() {
  valueHtml.value = editorRef.value.getHtml()
  emit('update', valueHtml.value)
}

// 监听 props 变化，监听父组件传来的content
watch(() => props.content, (newVal: string) => {
  nextTick(() => {
    if (editorRef.value) {
      // console.log(" 当前编辑器的状态：", editorRef.value);

      // 富文本编辑器按 html 格式回显
      editorRef.value.setHtml(newVal)
      valueHtml.value = newVal
    }
  })
})

onMounted(async () => {
  await nextTick() // 延迟渲染，确保 DOM 更新完成
  if (props.content) {
    valueHtml.value = props.content
  }
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null)
    return
  editor.destroy()
})
</script>
